<template>
  <view class="listLimited_view">
    <view class="back_img">
      <img
        :src="gIndexImage.img"
        alt=""
        style="width: 100%; height: 400px"
        srcset=""
      />
    </view>

    <view class="">
      <up-count-down
        :time="30 * 60 * 60 * 1000"
        format="HH:mm:ss"
      ></up-count-down>
    </view>
    <view class="listLimited">
      <scroll-view class="content" scroll-y="true" @scrolltolower="loadMore">
        <!-- 显示列表数据 -->

        <view
          class="Limited_item"
          v-for="(item, index) in listLimited.List"
          :key="index"
        >
          <view class="view_img">
            <img
              :src="item.imageAddress"
              alt=""
              style="width: 140px; height: 140px"
              srcset=""
            />
          </view>
          <view class="view_cent">
            <p class="goods_name">{{ item.name }}</p>
            <p class="price_span">
              <span class="span1">优惠价 ￥</span>
              <span class="span2">{{ item.amount }} </span>
              <!--  <span class="span3"> 即将恢复 ￥</span>
            <span class="span4">{{ item.beforePrice }}</span> -->
            </p>
          </view>
          <div style="width: 100%; display: flex; align-items: center">
            <div style="width: 70%; display: flex; align-items: center">
              <div style="width: 70%; height: 6px">
                <progress
                  :percent="((item.amount / item.number) * 100).toFixed(0)"
                  stroke-width="6"
                />
              </div>
              <div style="width: 30%; padding-left: 10px">
                已领{{ ((item.amount / item.number) * 100).toFixed(0) }}%
              </div>
            </div>
            <div style="width: 30%; padding-left: 10px">
              <p>
                <button
                  class="bg-primary text-lg text-white p_buttom"
                  @click="yuyue(item.id)"
                >
                  去抢购
                </button>
              </p>
            </div>
          </div>
        </view>
        <!-- 加载更多时显示的内容 -->
        <view v-if="daodile" class="loading-view"> 没有更多了... </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getgetIndexImage } from "@/api/shop";
import { getlistLimited } from "@/api/goods";

import { reactive, shallowRef, defineComponent, onMounted, ref } from "vue";
import {
  onLoad,
  onUnload,
  onShareAppMessage,
  onPageScroll,
} from "@dcloudio/uni-app";
import {
  getIndexImageIndexxinren,
  getyouhuiquanIndex,
  postreceivecouponid,
} from "@/api";
const baseUrl = `${import.meta.env.VITE_APP_BASE_URL || ""}/`;
const gIndexImage = reactive<{ img: string }>({
  img: "https://mzd-admin.muzhandao.com/api/uploads/image/20240507/39c7c9c7-e24c-4eae-8a46-2a33ed6c0a50.png",
});
const listLimited: any = reactive<{ List: [] }>({
  List: [],
});
const pageNos = ref(1);
const zongs = ref(0);
onLoad(() => {
  getgetIndexImage(1).then((res) => {
    console.log(res, "res");
    gIndexImage.img = baseUrl + "api/uploads/" + res;
  });
  getIndexImageIndexxinren({ type: 7 }).then((res) => {
    gIndexImage.img = baseUrl + "api/uploads/" + res;
  });
  getlist();
  /* getlistLimited().then((res) => {
    console.log(res, res.lists, "res11111111");
    listLimited.List = res.lists;
  }); */
});
const getlist = () => {
  getyouhuiquanIndex({
    pageNo: pageNos.value,
    pageSize: 10,
  }).then((res) => {
    console.log(res, res.lists, "res11111111");
    zongs.value = res.count;
    listLimited.List = res.lists;
    daodile.value = false;
  });
};
const list = ref();
const daodile = ref(false);
const loadMore = async () => {
  if (zongs.value <= pageNos.value * 10) {
    daodile.value = true;
    return;
  } else {
    daodile.value = false;
  }
  pageNos.value = pageNos.value + 1;
  await getyouhuiquanIndex({
    pageNo: pageNos.value,
    pageSize: 10,
  }).then((res) => {
    console.log(res, res.lists, "res11111111");
    /* listLimited.List = res.lists; */
    res.lists.forEach((item: any) => {
      listLimited.List.push(item);
    });
  });
};
const goPage = (url: string) => {
  uni.navigateTo({ url: url });
};

import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user";
onPullDownRefresh(() => {
  console.log("下拉刷新");
  pageNos.value = 1;
  getlist();
  uni.stopPullDownRefresh();
});
onReachBottom(() => {
  console.log("上拉加载更多");
  loadMore();
});
//
const userStore = useUserStore();
const yuyue = async (id: any) => {
  if (!userStore.isLogin) {
    uni.showLoading({
      title: "请稍后...",
    });
    uni.navigateTo({
      url: "/pages/login/login",
    });
    /*   await userStore.getUser(); */
    uni.hideLoading();
    /*   uni.navigateBack(); */
  } else {
    /* let res = await postreceivecouponid(id); */
    postreceivecouponid(id)
      .then((res) => {
        console.log(res);
        console.log("//////////////");
        if (res == null || res == "null") {
          uni.$u.toast("抢购成功");
        } else {
          uni.$u.toast(res.msg);
        }
      })
      .catch((orr) => {
        console.log(orr);
        console.log("=================");
        uni.$u.toast(orr);
      });
  }
};
</script>

<style lang="scss" scoped>
.listLimited_view {
  background: #a998c8;
  min-height: 100vh;
}
.Limited_item {
  display: flex;
  background: #e1d7ec;
  margin: 5px;
  margin-bottom: 20px;
  padding: 14px;
  border-radius: 10px;
  flex-wrap: wrap;
  .view_img {
    flex: 1;
    width: 140px;
  }

  .view_cent {
    flex: 2;
    width: calc(100% - 140px);
    padding-left: 10px;

    .goods_name {
      font-size: 20px;
      font-weight: 700;
    }

    .price_span {
      .span1 {
        font-size: 20px;
        font-weight: 700;
        color: red;
      }

      .span2 {
        font-size: 24px;
        font-weight: 700;
        color: red;
      }

      .span3 {
        font-size: 14px;
      }

      .span4 {
        font-size: 14px;
      }
    }
    .p_buttom {
      width: 100px;
      margin-top: 40px;
      margin-right: 0px;
    }
  }
}
.loading-view {
  text-align: center;
  padding: 10px 0;
  color: #000;
}
</style>